<template>
  <div :class="className" :style="{height:height,width:width}">
    <div style="color:#1797d6;font-size:18px;margin-bottom:18px">统计分布</div>
    <el-table height="280" :header-cell-style="{background:'#eee',color:'black'}" size="mini" :data="data" style="width: 100%; border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;border-radius:6px">
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :label="item"
        align="center">
        <template slot-scope="scope">
          <span>{{scope.row[index]}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'


  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      tableData: {
        type: Array,
        default: {}
      },
      height: {
        type: String,
        default: '350px'
      }
    },
    data() {
      return {
        column:[],
        data:[]
      }
    },
    watch: {
      tableData: {
        handler(val) {
          this.column = val[0]
          this.data = val.slice(1);
        }
      }
    }
  }
</script>
